<template>
  <div id="mention-modal" :style="{ top: top, left: left }">
    <el-input id="mention-input" v-model="searchVal" ref="input" @keyup="inputKeyupHandler" placeholder="请输入用户名搜索" />
    <el-scrollbar height="200px">
      <ul id="mention-list">
        <li v-for="item in searchedList" :key="item.id" @click="insertMentionHandler(item.id, item.username)">{{
          item.username }}({{ item.account }})
        </li>
      </ul>
    </el-scrollbar>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, nextTick } from 'vue'

const emit = defineEmits(['hideMentionModal', 'insertMention'])
// 定位信息
const top = ref('')
const left = ref('')
// list 信息
const searchVal = ref('')
const tempList = Array.from({ length: 20 }).map((_, index) => {
  return {
    id: index,
    username: '张三' + index,
    account: 'wp'
  }
})
const list = ref(tempList)
// const list = ref([
//   { id: 'a', name: 'A张三' },
//   { id: 'b', name: 'B李四' },
//   { id: 'c', name: 'C小明' },
//   { id: 'd', name: 'D小李' },
//   { id: 'e', name: 'E小红' },
// ])
// 根据 <input> value 筛选 list
const searchedList = computed(() => {
  const searchValue = searchVal.value.trim().toLowerCase()
  return list.value.filter(item => {
    const username = item.username.toLowerCase()
    if (username.indexOf(searchValue) >= 0) {
      return true
    }
    return false
  })
})
const inputKeyupHandler = (event: any) => {
  // esc - 隐藏 modal
  if (event.key === 'Escape') {
    emit('hideMentionModal')
  }

  // enter - 插入 mention node
  if (event.key === 'Enter') {
    // 插入第一个
    const firstOne = searchedList.value[0]
    if (firstOne) {
      const { id, username } = firstOne
      insertMentionHandler(id, username)
    }
  }
}
const insertMentionHandler = (id: any, username: any) => {
  emit('insertMention', id, username)
  emit('hideMentionModal') // 隐藏 modal
}
const input = ref()
onMounted(() => {
  // 获取光标位置
  const domSelection = window.getSelection()
  const domRange = domSelection?.getRangeAt(0)
  if (domRange == null) return
  console.log(domRange);
  const rect = domRange.getBoundingClientRect()
  console.log(rect);

  // 定位 modal
  top.value = `${rect.top - 50}px`
  left.value = `${rect.left - 56}px`

  // focus input
  nextTick(() => {
    // input.value?.focus()
  })
})
</script>

<style>
#mention-modal {
  position: absolute;
  border: 1px solid #ccc;
  background-color: #fff;
  padding: 5px;
  transition: all .3s;
}

#mention-modal input {
  width: 150px;
  outline: none;
}

#mention-modal ul {
  padding: 0;
  margin: 5px 0 0;
}

#mention-modal ul li {
  list-style: none;
  cursor: pointer;
  padding: 5px 2px 5px 10px;
  text-align: left;
}

#mention-modal ul li:hover {
  background-color: #f1f1f1;
}
</style>